<template>
    <div class="container">
 <!-- 汽车浏览 -->
  <div class="carbox" v-for="item in lovecar" :key="item.carid">
            <router-link tag="div" :to="'/page?id='+item.carid" class="cars">
               
                
                     <div class="car" >
                    <div class="imgs">
                        <img :src="item.carimg" alt="">
                        <em>
                            <img src="../assets/img/aixinchezhu_list.png" alt="">
                        </em>
                    </div>
                    <div class="content">
                        <h1>
                            <span>{{item.carname}}</span>
                            <em></em>
                        </h1>
                        <div class="plate">
                            <span>{{item.plate}}</span>
                            <span>9.1</span>
                        </div>
                        <div class="divide">5.0分</div>
                        <div class="ticket">
                            <p>券后￥<strong>817</strong>/天</p>
                            <span>{{item.frequency}}</span>
                        </div>
                    </div>
                </div>
               
            </router-link>
        </div>
    </div>
</template>

<script>
import { getLoveCar } from '@/api/lovecar.js';

    export default {
        name:"twoCar",
        data(){
            return{
                lovecar:null,
            }
        },
      
        created(){
            getLoveCar().then(data=>{
                console.log(data);
                this.lovecar = data.lovecar;
            
            })
        }
    }
</script>

<style lang="scss">
.carbox {
  width: 100%;
  background-color: #ebebeb;
  display: inline-block;
  .cars {
    width: 90%;
    margin: 0 auto;
    .car {
      width: 100%;
      height: 130px;
      margin-top: 10px;
      background-color: #fff;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .imgs {
        width: 150px;
        height: 110px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-top-left-radius: 5px;
        }
        em {
          & > img {
            width: 47px;
            height: 15px;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
      .content {
        width: 150px;
        height: 110px;
        display: flex;
        flex-direction: column;
        h1 {
          font-size: 14px;
          font-weight: 400;
          display: flex;
          margin-top: 8px;
          em {
            width: 17px;
            height: 17px;
            background: url("../assets/img/zi.png");
            background-size: 100% 100%;
            margin-top: 2px;
            margin-left: 5px;
          }
        }
        .plate {
          font-size: 10px;
          display: flex;
          justify-content: space-between;
          margin-top: 8px;
          span {
            &:nth-child(2) {
              margin-right: 10px;
            }
          }
        }
        .divide {
          font-size: 10px;
          color: #ffa41c;
          margin-top: 12px;
        }
        .ticket {
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-top: 8px;
          align-items: center;
          p {
            color: #f6a9c7;
            & > strong {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>